<template>
	<div>
		<p>{{reverseMessage}}</p>
		<p>{{reverseMessage()}}</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: "Hello, Vue"
			}
		},
		// 计算属性优势:
		// 带缓存
		// 计算属性对应函数执行后, 会把return值缓存起来
		// 依赖项不变, 多次调用都是从缓存取值
		// 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
		computed: {
			reverseMessage() {
				return this.msg.split('').reverse().join('')
			}
		},
		methods: {
			getMessage() {
		return this.msg.split('').reverse().join('')	
			}
		}
	}
</script>

<style>

</style>
